﻿@model IEnumerable<OutPut>
@{
    ViewBag.Title = "Index";
    var isowner = Convert.ToInt32(Html.ViewContext.RouteData.Values["uid"]) == LoginModel.User.Uid;
}

<div id="main" style="width:100%;" >
<ul  class="pbl_box unstyled" id="ul_main" >
    <li id="pubmenu" class="wmli " >
        <div>
            @if (isowner){
            <a href="/write/article/edit" target="write" class="btn btn-info"><i class="icon-edit icon-white"></i>撰写游记</a>
            }
            <ul id="right_menu" class="unstyled topline">
    @if (ViewBag.types!=null){
        foreach (var item in ViewBag.types)
        {
            <li style="margin-top: 3px;" >
                <div class="input-append">
                  <button tid="@item.Id" class="btn" type="button">@item.Name</button>
                    @if (isowner){
                  <button class="btn i" onclick="deletearticletype(@item.Id)" type="button"><i class="icon-trash"></i></button>
                    }
                </div>
            </li>
        }
    }
            </ul>
        </div>
    </li>
    @if (Model != null)
    {
        foreach (var item in Model)
        {
            var height = Convert.ToInt32(200 / (item.Scale == 0 ? 1 : item.Scale));
            <li id="li_@item.Id" class="wmli mi" >
                <div class="btnlist" >
                    @if (isowner){
                    <div class="btn-group">
                      <a class="btn dropdown" target="write" href="/write/article/edit/@item.Id" ><i class="icon-edit"></i> 编辑</a>
                      <a class="btn dropdown-toggle" data-toggle="dropdown" ><span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        <li><a onclick="editPicarticle(@item.Id)" ><i class="icon-picture"></i>封面</a></li>
                        <li><a onclick="deletearticle(@item.Id)" ><i class="icon-trash"></i> 删除</a></li>
                      </ul>
                    </div>
                    }
                </div>
                <div class="pic" style="height:@(height>500?500:height)px;" >
                <a href="/article/@item.Id" target="article"  title="@item.Title"  >
                    <img id="img_@item.Id" style="height:@(height)px" src="@(StaticCs.ImageUrl)/img?m=Width&w=200&file=@item.Pic">
                </a>
                </div>
                <div class="clear textleft topline bg body" style="position:relative;overflow:inherit;" >
                    @item.Title
                    <a data-id="@item.Id" title="评论" rel="tooltip" class="replyButton"></a>
                </div>
                <div class="clear textleft font12 marker topline bg" >
                   <span><i class="icon-map-marker"></i><a rel="tooltip" data-original-title="去发现更多分享"  target="_blank" href="@item.AddressUrl" >@item.Address</a></span>
                </div>
                <div class="commentbox clear topline"  >
                    <div id="commentlist_@item.Id" class="commentlist">
                        @if(item.Comments!=null){
                            foreach (var citem in item.Comments)
                            {
                                <div class="clear textleft " >
                                    <div class="pblheader" style="margin-top:0px;">
                                        <img src="@(StaticCs.ImageUrl)/img/Artwork?file=@citem.Header" />
                                    </div>
                                    <div class="usertxt">
                                    <span><a rel="tooltip" data-original-title="去Ta的主页看看吧！" href="/@citem.Uid">@citem.Uname</a>说:</span>
                                     <span class="font12 fontcl">@citem.Content</span>
                                    </div>
                                </div>
                            }
                        }
                    </div>
                    <div id="com_@item.Id" class="comment write" >
                        <textarea id="txtcomment_@item.Id" placeholder="写入你对此分享的看法吧！"></textarea>
                        <a id="combtn_@item.Id" data-id="@item.Id" rel="tooltip" data-original-title="提交" class="grid_comment_button"></a>
                    </div>
                </div>
            </li>
        }

    }
</ul>
</div>
<div class="clear"></div>
<div id="LoadingPins" style="display: none;"><img src="/css/images/BouncingLoader.gif" alt="Pin Loader Image"><span>数据加载中…</span></div>
<script type="text/template" id="templateli">
<li id="li_{Id}" class="wmli mi" >
<div class="btnlist" >
    @if(isowner){
    <div class="btn-group">
        <a class="btn dropdown" href="/write/article/edit/{Id}" ><i class="icon-edit"></i> 编辑</a>
        <a class="btn dropdown-toggle" data-toggle="dropdown" ><span class="caret"></span></a>
        <ul class="dropdown-menu">
        <li><a onclick="editPicarticle({Id})" ><i class="icon-picture"></i>封面</a></li>
        <li><a onclick="deletearticle({Id})" ><i class="icon-trash"></i> 删除</a></li>
        </ul>
    </div>
    }
</div>
<div class="pic" style="height:{divheight}px;" >
<a href="/article/{Id}" target="article"  title="{Title}"  >
<img id="img_{Id}" style="height:{height}px" src="@(StaticCs.ImageUrl)/img?m=Width&w=200&file={Pic}">
</a>
</div>
<div class="clear textleft topline bg body" style="position:relative;overflow:inherit;" >
{Title}
<a data-id="{Id}" title="评论" rel="tooltip" class="replyButton"></a>
</div>
<div class="clear textleft font12 marker topline bg" >
<span><i class="icon-map-marker"></i><a rel="tooltip" data-original-title="去发现更多分享"  target="_blank" href="{AddressUrl}" >{Address}</a></span>
</div>
<div class="commentbox clear topline"  >
<div id="commentlist_{Id}" class="commentlist">
{comments}
</div>
<div id="com_{Id}" class="comment write" >
<textarea id="txtcomment_{Id}" placeholder="写入你对此分享的看法吧！"></textarea>
<a id="combtn_{Id}" data-id="{Id}" rel="tooltip" data-original-title="提交" class="grid_comment_button"></a>
</div>
</div>
</li>
</script>
<script type="text/template" id="templatereply" >
<div class="clear textleft " ><div class="pblheader" style="margin-top:0px;">
<img src="@(StaticCs.ImageUrl)/img/Artwork?file={Header}" /></div><div class="usertxt">
<span><a rel="tooltip" data-original-title="去Ta的主页看看吧！" href="/{Uid}">{Uname}</a>说:</span>
<span class="font12 fontcl">{Content}</span></div></div>
</script>

<script type="text/template" id="templateuploadbox">
    <div style="width: 410px;" class="span11 row-fluid">
    <div class="tab-pane" id="profile">
        <div class="span6">
            <div id="bootstrapped-fine-uploader" style="width: 240px;">
            </div>
        </div>
    </div>
    <div style="clear: both;"></div>
    <div style="width: 88%; margin: 5px;display:none;">
        <input type="submit" class="btn btn-primary" style="float: right;" value="确定" />
        <div style="clear: both;"></div>
    </div>
    <div id="showimg" style="display: none; width: 200px;"></div>
</div>
</script>

@section scripts{
    @Scripts.Render("~/js/jqwaterfall")  
    <script type="text/javascript">
        var lastid = @(ViewBag.lastid??0);
        var typeId=0;
        var inload=false;
        var isshow=false;
        var index=0;

        var waterfall=$("#main").waterfall({marginleft:11,margintop:10,childbox:"ul .wmli",wffn:function(){getload();},float:"right"});
        function getload(){
            if(!inload){
                inload=true;
                loadarticleData(lastid,10);
            }
        }
        $(document).ready(function(){
            $("#right_menu .input-append .btn").not(".i").click(function(){
                $(this).toggleClass('active').parent().parent("li").siblings().find(".btn").removeClass("active");
                typeId=$(".input-append").find(".active").attr("tid");
                if(typeId==undefined)
                {
                    typeId=0;
                }
                isshow=false;
                lastid=0;
                index=0;
                showloading();
                $("#ul_main .mi").remove();
                loadarticleData(lastid,20);
            });
            bindevent();
            $("#btnmin").click(function(){
                showloading();
                $("#ul_main .mi").remove();
                loadarticleData(0,20);
            });
        });

        function loadarticleData(lastid,size)
        {
            $.get("/Action/Article/GetUserArticles",{lastid:lastid,size:size,typeid:typeId,title:"",uid:@Html.ViewContext.RouteData.Values["uid"]},function(data){
                if(data&&data.length>0)
                {
                    $("#ul_main").append(BindData(data));
                    ClosemsgModal();
                    bindevent();
                    inload=false;
                    lastsup=data[data.length-1].SupCount;
                }else{
                    showinfo("已到世界的尽头！"); 
                }
                waterfall.sortWaterfall();
            });
        }

        function BindData(data)
        {
            var res="";
            $.each(data,function(i,n){
                if(!document.getElementById("li_"+n.Id))
                {
                    res+=$("#templateli").html()
                        .replaceo("height",200/(n.Scale==0?1:n.Scale))
                        .replaceo("divheight",(200/(n.Scale==0?1:n.Scale))>500?500:200/(n.Scale==0?1:n.Scale))
                        .replaceo("Time",MillisecondToDate(n.Time))
                        .replaceo("show",n.IsSys?"display:none":"")
                        .fill(n)
                        .replaceo("comments",BindComment(n.Comments));
                }
            });
            lastid=data[data.length-1].Id;
            return res;
        }

        function BindComment(data)
        {
            var res="";
            $.each(data,function(i,n){
                if(document.getElementById("li_"+data.Id))
                {
                    res+=$("#templatereply").html().fill(n);
                }
            });
            return res;
        }

        function deletearticletype(id)
        {
            setconfirm("确定要删除吗？文章也会被删除！",function(){
                $.post("/Action/Article/DeleteArticleType",{id:id},function(data){
                    if(data.error==0)
                    {
                        location.reload();
                    }else if(data.error==1001){
                        showloginDialog();
                    }else{
                        showerror("删除失败！");
                    }
                });
            });
        }

        function deletearticle(id)
        {
            setconfirm("确定要删除吗？",function(){
                $.post("/Action/Article/DeleteArticle",{id:id},function(data){
                    if(data.error==0)
                    {
                        $("#li_"+id).remove();
                        waterfall.sortWaterfall();
                        showinfo("删除成功！");
                    }else if(data.error==1001){
                        showloginDialog();
                    }else{
                        showerror("删除失败！");
                    }
                });
            });
        }


        var uploadid;
        function editPicarticle(id)
        {
            uploadid=id;
            showloading();
            $("#basic-modal-content").html($("#templateuploadbox").html()).modal({ position: { at: "top" }, title: '上传图片' });
            createUploader(uploadfontface,false);
        }

        function uploadfontface(imgs)
        {
            $.get("/Action/Article/UploadFrontCover",{id:uploadid,file:imgs[0]},function(data){
                if(data.error==0)
                {
                    $("#img_"+uploadid).attr("src","@(StaticCs.ImageUrl)/img?m=Width&w=200&file="+data.file);
                    $("#img_"+uploadid).css({height:200/data.scale});
                    waterfall.sortWaterfall();
                    closemodal();
                    showinfo("修改成功！");
                }else if(data.error==1001){
                    showloginDialog();
                }else{
                    showerror("修改失败！");
                }
            });
        }

        function bindevent()
        {
            $(".wmli").hover(function(){
                $(this).children(".btnlist").show();
                
            },function(){
                $(this).children(".btnlist").hide();
            });

            $(".body").hover(function(){
                $(this).find(".replyButton").css({visibility:"visible"}).animate({opacity:1},100);
            },function(){
                $(this).find(".replyButton").css({visibility:"hidden"}).animate({opacity:0},100);
            });

            $(".replyButton").toggle(function(){
                isshow=true;
                var id=$(this).attr("data-id");
                $("#com_"+id).show();
                waterfall.sortWaterfall();
                $("#txtcomment_"+id).animate({borderColor:'rgba(240, 9, 184,1)'},500);
                setTimeout("commentborder1("+id+")",500);
            },function(){
                isshow=false;
                var id=$(this).attr("data-id");
                $("#com_"+id).hide();
                waterfall.sortWaterfall();
            });

            $(".grid_comment_button").click(function(){
                var id=$(this).attr("data-id");
                var body=$("#txtcomment_"+id).val();
                if(body!=null&&body!=""){
                    $.post("/Action/Comment/DoCommentA",{id:id,content:body},function(data){
                        if(data.Id>0)
                        {
                            $("#commentlist_"+id).append($("#templatereply").html().fill(data));
                            $("#com_"+id).hide();
                            waterfall.sortWaterfall();
                            $("#txtcomment_"+id).val("");
                            showinfo("发布成功！");
                        }else{
                            showerror("发布失败！");
                        }
                    });
                }
            });
            $(".comment textarea").focus(function(){
                isshow=false;
            });
           
            $('a[rel=tooltip]').tooltip({
                'placement': 'bottom'
            });
        }
        var isshow=true;
        function commentborder1(id)
        {
            $("#txtcomment_"+id).animate({borderColor:'rgba(147, 179, 171,1)'},500);
            if(isshow){
                setTimeout("commentborder2("+id+")",500);
            }
        }
        function commentborder2(id)
        {
            $("#txtcomment_"+id).animate({borderColor:'rgba(240, 9, 184,1)'},500);
            setTimeout("commentborder1("+id+")",500);
        }

        function setTitle(obj,msg)
        {
            $(obj).attr("title",msg);
            setTimeout("doremovetitle("+obj+")",600);
        }

        function doremovetitle(obj)
        {
            $(obj).removeAttr("title");
        }
        setucentmenu("article");
    </script>  
}